import { initDraggable, updatePanelPosition, isDragging } from './dragHandler.js';
import { updateControlPosition } from './positionUpdater.js';
import { applyVolume, getCurrentVolume } from './volumeControl.js';
import { throttle } from './utils.js';

export function createVolumeControl() {
  const volumeControl = document.createElement('div');
  volumeControl.id = 'chrome-volume-control';
  volumeControl.innerHTML = `
    <div id="volume-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#FFFFFF" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
      </svg>
    </div>
    <div id="volume-panel" style="display: none;">
      <div id="close-control">暂时关闭</div>
      <div id="volume-display">100%</div>
      <input type="range" id="volume-slider" min="0" max="1000" value="100">
    </div>
  `;
  document.body.appendChild(volumeControl);

  const volumeIcon = document.getElementById('volume-icon');
  const volumePanel = document.getElementById('volume-panel');
  const volumeSlider = document.getElementById('volume-slider');
  const volumeDisplay = document.getElementById('volume-display');
  const closeControl = document.getElementById('close-control');

  // 跟踪鼠标是否正在悬停在某个面板上
  let isHoveringPanel = false;

  // 初始化音量滑块
  const initialVolume = getCurrentVolume();
  volumeSlider.value = initialVolume;
  volumeDisplay.textContent = initialVolume + '%';
  applyVolume(initialVolume);

  // 鼠标悬停显示控制面板，离开隐藏控制面板
  volumeIcon.addEventListener('mouseenter', function() {
    volumePanel.style.display = 'block';
    volumePanel.style.opacity = '1';
    volumePanel.style.visibility = 'visible';
    updatePanelPosition();
  });

  volumeIcon.addEventListener('mouseleave', function() {
    if (!isDragging) {
      setTimeout(() => {
        if (!isHoveringPanel && !isDragging) {
          volumePanel.style.display = 'none';
          volumePanel.style.opacity = '0';
          volumePanel.style.visibility = 'hidden';
        }
      }, 100);
    }
  });

  volumePanel.addEventListener('mouseenter', function() {
    isHoveringPanel = true;
  });

  volumePanel.addEventListener('mouseleave', function() {
    isHoveringPanel = false;
    if (!isDragging) {
      volumePanel.style.display = 'none';
      volumePanel.style.opacity = '0';
      volumePanel.style.visibility = 'hidden';
    }
  });

  // 添加关闭控制器的功能
  closeControl.addEventListener('click', function() {
    volumeControl.style.display = 'none';
    // 保存当前音量设置到 sessionStorage
    sessionStorage.setItem('lastVolume', volumeSlider.value);
  });

  // 检查是否有保存的音量设置
  const savedVolume = sessionStorage.getItem('lastVolume');
  if (savedVolume) {
    volumeSlider.value = savedVolume;
    volumeDisplay.textContent = savedVolume + '%';
    applyVolume(parseInt(savedVolume));
  }

  // 监听滑块变化
  volumeSlider.addEventListener('input', throttle(function() {
    const volume = this.value;
    volumeDisplay.textContent = volume + '%';
    applyVolume(volume);
  }, 50));

  // 初始化拖拽功能
  initDraggable();

  // 初始化位置
  updateControlPosition();
  updatePanelPosition();

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    updateControlPosition();
    updatePanelPosition();
  });
}